e
<template>
  <div class="box">
    <el-tabs v-model="activeName">
      <div class="header">
        <el-form
          ref="khForm"
          :model="khForm"
          label-width="100px"
          class="flex"
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 20px;
          "
        >
          <div class="flex-between">
            <div :class="flag ? 'flex-sb' : 'adaptive'">
              <el-form-item label="单号/包号">
                <el-input
                  v-model="khForm.code"
                  placeholder="请输入"
                  style="width: 100%"
                  @input="changeCodes"
                />
              </el-form-item>
              <el-form-item>
                <el-checkbox-group
                  v-model="khForm.isPackageNumber"
                  size="medium"
                  style="width: 100%"
                >
                  <el-checkbox
                    :true-label="1"
                    :false-label="0"
                    size="medium"
                    label="包内件查询"
                    name="type"
                  />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="结算网点">
                <el-select
                  v-model="khForm.settleNetworkNameId"
                  placeholder="请选择"
                  clearable
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in List"
                    :key="item.id"
                    :label="item.networkName"
                    :value="item.networkName"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="进/出港">
                <el-select
                  v-model="khForm.enterLeavingPort"
                  placeholder="请选择"
                  clearable
                  style="width: 100%"
                >
                  <el-option label="全部" value="全部" />
                  <el-option label="进港" value="进港" />
                  <el-option label="出港" value="出港" />
                  <el-option label="综合" value="综合" />
                </el-select>
              </el-form-item>
            </div>
            <div class="flex-sa">
              <el-form-item>
                <el-button
                  type="primary"
                  class="bt"
                  :class="id === 1 ? 'active' : ''"
                  @click="getKhList"
                  >查询</el-button
                >
                <el-button
                  class="bt"
                  :class="id === 2 ? 'active' : ''"
                  @click="khClear"
                  >重置</el-button
                >
              </el-form-item>
            </div>
          </div>
          <div class="flex-between">
            <div :class="flag ? 'flex-sb' : 'adaptive'">
              <el-form-item label="费用类别">
                <el-select
                  v-model="costKind"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option label="费用大类" value="1" />
                  <el-option label="费用小类" value="2" />
                  <el-option label="费用名称(预付款)" value="3" />
                  <el-option label="费用子项" value="4" />
                </el-select>
              </el-form-item>
              <el-form-item label="费用大类">
                <el-select
                  v-model="khForm.costBigKind"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                  @change="subclass(khForm.costBigKind)"
                >
                  <el-option
                    v-for="item in LookUpCategoriesList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="揽件员">
                <el-select
                  v-model="khForm.solicitor"
                  placeholder="请选择客户类型"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="item in TakeManList"
                    :key="item.id"
                    :label="item.solicitor"
                    :value="item.solicitor"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="派件员">
                <el-select
                  v-model="khForm.courier"
                  placeholder="请选择有效客户筛"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="item in TakeManList"
                    :key="item.id"
                    :label="item.solicitor"
                    :value="item.solicitor"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="flex-sa">
              <el-form-item>
                <el-button
                  class="bt"
                  type="primary"
                  :class="id === 3 ? 'active' : ''"
                  @click="khSearch"
                  >导出</el-button
                >
                <el-button
                  class="bt"
                  :class="id === 4 ? 'active' : ''"
                  @click="khClear1"
                  >更多</el-button
                >
              </el-form-item>
            </div>
          </div>
          <div :class="flag ? 'flex-sb-t' : 'adaptive'">
            <el-form-item label="客户名称">
              <el-input
                v-model="khForm.client"
                placeholder="请输入客户昵称"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item>
              <el-checkbox-group
                v-model="khForm.amountIsZero"
                size="medium"
                style="width: 100%"
              >
                <el-checkbox
                  :true-label="1"
                  :false-label="0"
                  size="medium"
                  label="金额不为0"
                  name="type"
                />
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="承包区">
              <el-select
                v-model="khForm.contractArea"
                placeholder="请选择客户状态"
                style="width: 100%"
                clearable
                @change="ShowCover"
              >
                <el-option
                  v-for="item in ShowCoverAreaLit"
                  :key="item.id"
                  :label="item.networkName"
                  :value="item.networkName"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="deep1">
              <el-select
                v-model="khForm.dateType"
                placeholder="请选择客户状态"
                clearable
              >
                <el-option label="会计日期" :value="1" />
                <el-option label="扣付日期" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item class="w10 deep">
              <el-date-picker
                v-model="value1"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                :picker-options="pickerOptions"
                @change="changeTime"
              />
            </el-form-item>
          </div>
          <div :class="flag ? 'flex-sb' : 'adaptive'">
            <el-form-item
              v-if="costKind === '2' || costKind === '3' || costKind === '4'"
              label="费用小类"
            >
              <el-select
                v-model="khForm.costSmallKind"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in CostSmallKindList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="costKind === '3' || costKind === '4'"
              label="费用名称"
            >
              <el-select
                v-model="khForm.hqCostKind"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in FeeNameList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="costKind === '4'" label="结算科目">
              <el-select
                v-model="khForm.hqSettleObject"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in SettlementList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="costKind === '4'" label="费用子项">
              <el-select
                v-model="khForm.hqCostSubitem"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in FeeSubitemList"
                  :key="item.id"
                  :label="item.costSubitem"
                  :value="item.cccostSubitem"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="flex-between-add">
        <div style="height: 32px; line-height: 32px">共{{ total }}项</div>
        <el-button class="end" type="primary" @click="dialog = true"
          >添加手工账单</el-button
        >
        <!-- 手工账单添加 -->
        <el-drawer
          ref="drawer"
          class="addform"
          title="手工账单添加"
          :before-close="handleClose"
          :visible.sync="dialog"
          direction="ltr"
          custom-class="demo-drawer"
          @open="onDrawerOpen"
        >
          <div ref="drawerContent" class="demo-drawer__content">
            <el-form :model="addForm">
              <el-form-item label="运单号" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.transportCode"
                  placeholder="请输入运单号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="大包号" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.bagCode"
                  placeholder="请输入大包号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="结算网点名称" :label-width="formLabelWidth">
                <el-select
                  v-model="addForm.settleNetworkName"
                  placeholder="请选择结算网点"
                  clearable
                  @change="changeNetworkName(List)"
                >
                  <el-option
                    v-for="item in List"
                    :key="item.id"
                    :lable="item.networkName"
                    :value="item.networkName"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="
                    承包区名称"
                :label-width="formLabelWidth"
              >
                <el-select
                  v-model="addForm.contractArea"
                  placeholder="请选择承包区"
                  clearable
                  @change="changeContractArea(ShowCoverAreaLit)"
                >
                  <el-option
                    v-for="item in ShowCoverAreaLit"
                    :key="item.id"
                    :label="item.networkName"
                    :value="item.networkName"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="费用名称" :label-width="formLabelWidth">
                <el-select
                  v-model="addForm.hqCostKind"
                  placeholder="请选择费用类别"
                  clearable
                  @change="changeCostKind(FeeNameList)"
                >
                  <el-option
                    v-for="item in FeeNameList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="结算科目名称" :label-width="formLabelWidth">
                <el-select
                  v-model="addForm.hqSettleObject"
                  placeholder="请选择结算科目"
                  clearable
                  @change="changeSettleObject(SettlementList)"
                >
                  <el-option
                    v-for="item in SettlementList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="费用子项名称" :label-width="formLabelWidth">
                <el-select
                  v-model="addForm.hqCostSubitem"
                  placeholder="请选择费用子项类别"
                  clearable
                  @change="changeCostSubitem(FeeSubitemList)"
                >
                  <el-option
                    v-for="item in FeeSubitemList"
                    :key="item.id"
                    :label="item.costSubitem"
                    :value="item.costSubitem"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="收入" :label-width="formLabelWidth">
                <el-input
                  v-model.number="addForm.income"
                  placeholder="请输入收入金额"
                  clearable
                />
              </el-form-item>
              <el-form-item label="支出" :label-width="formLabelWidth">
                <el-input
                  v-model.number="addForm.expend"
                  placeholder="请输入支出金额"
                  clearable=""
                />
              </el-form-item>
              <el-form-item label="进/出港" :label-width="formLabelWidth">
                <el-select
                  v-model="addForm.boundType"
                  placeholder="请选择进/出港"
                  clearable
                >
                  <el-option label="进港" value="进港" />
                  <el-option label="出港" value="出港" />
                  <el-option label="综合" value="综合" />
                </el-select>
              </el-form-item>
              <el-form-item label="结算重量" :label-width="formLabelWidth">
                <el-input
                  v-model.number="addForm.settleWeight"
                  placeholder="请输入结算重量"
                  clearable
                />
              </el-form-item>
              <el-form-item label="费用说明" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.costExplain"
                  placeholder="请输入费用说明"
                  clearable
                />
              </el-form-item>
              <el-form-item label="寄件日期" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="addForm.sendDate"
                  type="date"
                  placeholder="请选择寄件日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
              <el-form-item label="会计日期" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="addForm.accountantDate"
                  type="date"
                  placeholder="请选择会计日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
              <el-form-item label="扣付日期" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="addForm.deductPayDate"
                  type="date"
                  placeholder="请选择扣付日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
              <el-form-item label="费用大类名称" :label-width="formLabelWidth">
                <el-select
                  v-model="addForm.costBigKind"
                  placeholder="请选择费用大类类别"
                  clearable
                  @change="
                    changeBigKind(LookUpCategoriesList, addForm.costBigKind)
                  "
                >
                  <el-option
                    v-for="item in LookUpCategoriesList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="费用小类名称" :label-width="formLabelWidth">
                <el-select
                  v-model="addForm.costSmallKind"
                  placeholder="请选择费用小类类别"
                  clearable=""
                  @change="changeSmallKind(CostSmallKindList)"
                >
                  <el-option
                    v-for="item in CostSmallKindList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="网点称重" :label-width="formLabelWidth">
                <el-input
                  v-model.number="addForm.networkWeight"
                  placeholder="请输入网点称重"
                  clearable
                />
              </el-form-item>
              <el-form-item label="直属称重" :label-width="formLabelWidth">
                <el-input
                  v-model.number="addForm.directlyWeight"
                  placeholder="请输入直属称重"
                  clearable
                />
              </el-form-item>
              <el-form-item label="第三方称重" :label-width="formLabelWidth">
                <el-input
                  v-model.number="addForm.thirdPartyWeight"
                  placeholder="请输入第三方称重"
                  clearable
                />
              </el-form-item>
              <el-form-item label="计泡重" :label-width="formLabelWidth">
                <el-input
                  v-model.number="addForm.bubbleWeight"
                  placeholder="请输入计泡重"
                  clearable
                />
              </el-form-item>
              <el-form-item label="长*宽*高" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.lengthWidthHeight"
                  placeholder="请输入长*宽*高"
                  clearable
                />
              </el-form-item>
              <el-form-item label="运输方式" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.transportType"
                  placeholder="请输入运输方式"
                  clearable
                />
              </el-form-item>
              <el-form-item label="转运中心名称" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.transportCentreName"
                  placeholder="请输入转运中心名称"
                  clearable=""
                />
              </el-form-item>
              <el-form-item
                label="始发承包区名称"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="addForm.startContractAreaName"
                  placeholder="请输入始发承包区名称"
                  clearable
                />
              </el-form-item>
              <el-form-item
                label="始发上级网点名称"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="addForm.startSuperiorsNetworkName"
                  placeholder="请输入始发上级网点名称"
                  clearable
                />
              </el-form-item>
              <el-form-item
                label="收件承包区名称"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="addForm.pickUpContractAreaName"
                  placeholder="请输入收件承包区名称"
                  clearable
                />
              </el-form-item>
              <el-form-item
                label="收件上级网点名称"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="addForm.pickUpSuperiorsNetworkName"
                  placeholder="请输入收件上级网点名称"
                  clearable
                />
              </el-form-item>
              <el-form-item label="揽件员名称" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.solicitor"
                  placeholder="揽件员名称"
                  clearable
                />
              </el-form-item>
              <el-form-item label="始发城市名称" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.startCity"
                  placeholder="请输入始发城市名称"
                  clearable
                />
              </el-form-item>
              <el-form-item
                label="目的承包区名称"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="addForm.objectiveContractAreaName"
                  placeholder="请输入目的承包区名称"
                  clearable
                />
              </el-form-item>
              <el-form-item
                label="目的上级网点名称"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="addForm.objectiveSuperiorsNetworkName"
                  placeholder="请输入目的上级网点名称"
                  clearable
                />
              </el-form-item>
              <el-form-item label="派件员名称" :label-width="formLabelWidth">
                <el-select
                  v-model="addForm.courier"
                  placeholder="请选择派件员"
                  clearable
                >
                  <el-option
                    v-for="item in TakeManList"
                    :key="item.id"
                    :label="item.solicitor"
                    :value="item.solicitor"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="目的省份名称" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.courierProvince"
                  placeholder="请输入目的省份名称"
                  clearable
                />
              </el-form-item>
              <el-form-item label="目的城市名称" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.courierCity"
                  placeholder="请输入目的城市名称"
                  clearable
                />
              </el-form-item>
              <el-form-item label="客户名称" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.client"
                  placeholder="请输入客户名称"
                  clearable
                />
              </el-form-item>
              <el-form-item label="订单来源" :label-width="formLabelWidth">
                <el-input
                  v-model="addForm.orderSource"
                  placeholder="请输入订单来源"
                  clearable
                />
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button
                type="primary"
                :loading="drawer_loading"
                @click="$refs.drawer.closeDrawer()"
                >{{ drawer_loading ? "提交中 ..." : "确 定" }}</el-button
              >
            </div>
          </div>
        </el-drawer>
      </div>
      <el-table
        v-loading="loading"
        :data="khTable"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center' }"
        border
        style="width: 100%"
      >
        <el-table-column prop="transportCode" label="运单号" width="200" />
        <el-table-column prop="bagCode" label="大包号" width="120" />
        <el-table-column
          prop="settleNetworkName"
          label="结算网点名称"
          width="120"
        />
        <el-table-column prop="hqCostKind" label="费用名称" width="120" />
        <el-table-column
          prop="hqSettleObject"
          label="结算科目名称"
          width="120"
        />
        <el-table-column
          prop="hqCostSubitem"
          label="费用子项名称"
          width="150"
        />
        <el-table-column prop="income" label="收入(元)" width="120" />
        <el-table-column prop="expend" label="支出(元)" width="120" />
        <el-table-column prop="settleWeight" label="结算重量" width="120" />
        <el-table-column prop="costExplain" label="费用说明" width="120" />
        <el-table-column prop="sendDate" label="寄件日期" width="120" />
        <el-table-column prop="accountantDate" label="会计日期" width="120" />
        <el-table-column prop="deductPayDate" label="扣付日期" width="120" />
        <el-table-column prop="costBigKind" label="费用大类名称" width="120" />
        <el-table-column
          prop="costSmallKind"
          label="费用小类名称"
          width="120"
        />
        <el-table-column prop="clientStatus" label="重量信息" width="120">
          <el-table-column prop="networkWeight" label="网点称重" width="120" />
          <el-table-column prop="directlyWeight" label="直属称重" width="120" />
          <el-table-column
            prop="thirdPartyWeight"
            label="第三方称重"
            width="120"
          />
          <el-table-column prop="bubbleWeight" label="计泡重" width="120" />
          <el-table-column
            prop="lengthWidthHeight"
            label="长*宽*高"
            width="120"
          />
        </el-table-column>
        <el-table-column prop="clientStatus" label="中转信息" width="120">
          <el-table-column prop="transportType" label="运输方式" width="120" />
          <el-table-column
            prop="transportCentreName"
            label="转运中心名称"
            width="200"
          />
        </el-table-column>
        <el-table-column prop="clientStatus" label="发件信息" width="120">
          <el-table-column
            prop="startContractAreaName"
            label="始发承包区名称"
            width="200"
          />
          <el-table-column
            prop="startSuperiorsNetworkName"
            label="始发上级网点名称"
            width="200"
          />
          <el-table-column
            prop="pickUpContractAreaName"
            label="收件承包区名称"
            width="200"
          />
          <el-table-column
            prop="pickUpSuperiorsNetworkName"
            label="收件上级网点名称"
            width="200"
          />
          <el-table-column prop="hqSolicitor" label="揽件员名称" width="120" />
          <el-table-column prop="startCity" label="始发城市名称" width="120" />
        </el-table-column>
        <el-table-column prop="clientStatus" label="派件信息" width="120">
          <el-table-column
            prop="objectiveContractAreaName"
            label="目的承包区名称"
            width="200"
          />
          <el-table-column
            prop="objectiveSuperiorsNetworkName"
            label="目的上级网点名称"
            width="140"
          />
          <el-table-column prop="courier" label="派件员名称" width="120" />
          <el-table-column
            prop="courierProvince"
            label="目的省份名称"
            width="120"
          />
          <el-table-column
            prop="courierCity"
            label="目的城市名称"
            width="120"
          />
        </el-table-column>
        <el-table-column prop="clientStatus" label="客户信息" width="120">
          <el-table-column prop="client" label="客户名称" width="200" />
          <el-table-column prop="orderSource" label="订单来源" width="120" />
        </el-table-column>
        <!-- <el-table-column label="操作" width="120" fixed="right" /> -->
      </el-table>
      <div
        style="
          display: flex;
          justify-content: space-between;
          height: 32px;
          line-height: 32px;
        "
      >
        <div style="display: flex">
          <div class="text">
            合计金额：<span class="shu">{{ SumSummaryList.totalAmount }}</span>
          </div>
          <div
            style="
              width: 1px;
              height: 24px;
              background: #ebecee;
              margin: 0 24px;
            "
          />
          <div class="text">
            总收入：<span class="shu">{{ SumSummaryList.totalIncome }}</span>
          </div>
          <div
            style="
              width: 1px;
              height: 24px;
              background: #ebecee;
              margin: 0 24px;
            "
          />
          <div class="text">
            总支出：<span class="shu">{{ SumSummaryList.totalExpend }}</span>
          </div>
        </div>
        <div class="block" style="display: flex; justify-content: flex-end">
          <el-pagination
            :current-page="khForm.pageDate.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="khForm.pageDate.pageSize"
            layout="total, prev, pager, next"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-tabs>
  </div>
</template>
<script>
import {
  DetailSearchApi,
  CostBigKindApi,
  CostSmallKindApi,
  FeeNameApi,
  SettlementApi,
  FeeSubitemApi,
  CostSmallKindByBigApi,
  TakeManApi,
  ShowCoverAreaApi,
  ShowCoverAreaByNetApi,
  SumSummaryApi,
} from "@/api/HqFinancePanel";
import { getOutletsList } from "@/api/dashboard";
import { exportDataWDZDMX } from "@/api/home";
import { detailInsert } from "@/api/HqFinancePanel";

export default {
  data() {
    return {
      value1: [],
      pickerOptions: {
        disabledDate: this.disabledDate,
      },
      type1: true,
      id: 1,
      loading: false,
      costKind: "3",
      testCode: [],
      khForm: {
        code: JSON.stringify(this.testCode),
        settleNetworkNameId: "",
        enterLeavingPort: "全部",
        // costKind: "3",
        costBigKind: "",
        solicitor: "",
        courier: "",
        client: "",
        contractArea: "",
        dateType: 0,
        startTime: "",
        endTime: "",
        isPackageNumber: "",
        costSmallKind: "",
        hqCostKind: "",
        hqSettleObject: "",
        hqCostSubitem: "",
        amountIsZero: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      // 客户表格
      khTable: [],
      khTotal: 0,
      ywyTotal: 0,
      ddTotal: 0,
      cbqTotal: 0,
      activeName: "first",
      // 网点列表
      networkList: [],
      pageSize: 10,
      pageNum: 1,
      List: [], // 网点列表
      kk: "",
      LookUpCategoriesList: [], // 网点大类列表
      CostSmallKindList: [], // 费用小类列表
      FeeNameList: [], // 费用名称列表
      SettlementList: [], // 结算科目列表
      FeeSubitemList: [], // 费用子项列表
      TakeManList: [], // 揽收员列表
      ShowCoverAreaLit: [], // 承包区列表
      SumSummaryList: {}, // 金额汇总
      current: 0, // 页数
      pages: "", // 条数
      total: 0, // 总数
      flag: null,

      // 手工账单添加
      dialog: false,
      drawer_loading: false,
      addForm: {
        transportCode: "", // 运单号
        bagCode: "", // 大包号
        settleNetworkNameId: "", // 结算网点编码
        settleNetworkName: "", // 结算网点名称
        contractAreaId: "", // 承包区编码
        contractArea: "", // 承包区名称
        hqCostKindId: "", // 费用名称编码
        hqCostKind: "", // 费用名称
        hqSettleObjectId: "", // 结算科目名称编码
        hqSettleObject: "", // 结算科目名称
        hqCostSubitemId: "", // 费用子项名称编码
        hqCostSubitem: "", // 费用子项名称
        income: 0, // 收入
        expend: 0, // 支出
        boundType: "", // 进/出港
        settleWeight: 0, // 结算重量
        costExplain: "", // 费用说明
        sendDate: "", // 寄件日期
        accountantDate: "", // 会计日期
        deductPayDate: "", // 扣付日期
        costBigKindId: "", // 费用大类名称编码
        costBigKind: "", // 费用大类名称
        costSmallKindId: "", // 费用小类名称编码
        costSmallKind: "", // 费用小类名称
        networkWeight: 0, // 网点称重
        directlyWeight: 0, // 直属称重
        thirdPartyWeight: 0, // 第三方称重
        bubbleWeight: 0, // 计泡重
        lengthWidthHeight: "", // 长*宽*高
        transportType: "", // 运输方式
        transportCentreName: "", // 转运中心名称
        startContractAreaName: "", // 始发承包区名称
        startSuperiorsNetworkName: "", // 始发上级网点名称
        pickUpContractAreaName: "", // 收件承包区名称
        pickUpSuperiorsNetworkName: "", // 收件上级网点名称
        solicitor: "", // 揽件员名称
        startCity: "", // 始发城市名称
        objectiveContractAreaName: "", // 目的承包区名称
        objectiveSuperiorsNetworkName: "", // 目的上级网点名称
        courier: "", // 派件员名称
        courierProvince: "", // 目的省份名称
        courierCity: "", // 目的城市名称
        client: "", // 客户名称
        orderSource: "", // 订单来源
      },
      formLabelWidth: "80px",
      timer: null,
    };
  },
  created() {
    if (this.$store.state.app.wdzdmxtab !== null) {
      this.getSearchData();
    }
    // this.Detail()
    this.getOutlets();
    this.LookUpCategories();
    this.CostSmallKind();
    this.FeeName();
    this.Settlement();
    this.FeeSubitem();
    this.TakeMan();
    this.ShowCoverArea();
    // this.defaultDate()
    this.SumSummaryList.totalExpend = 0;
    this.SumSummaryList.totalIncome = 0;
    this.SumSummaryList.totalAmount = 0;
  },
  activated() {
    // console.log('Component activated')
    // 进行一些操作比如数据重新请求等
    if (this.$store.state.app.wdzdmxtab !== null) {
      this.getSearchData();
    }
  },
  mounted() {
    this.updateScreenWidth();
    window.addEventListener("resize", this.updateScreenWidth);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateScreenWidth);
  },
  methods: {
    subclass(name) {
      if (name == "") {
        this.CostSmallKind();
      } else {
        this.LookUpCate(name);
      }
    },
    onDrawerOpen() {
      this.$nextTick(() => {
        this.$refs.drawerContent.scrollIntoView({
          block: "start",
          behavior: "auto",
        });
      });
    },
    changeNetworkName(data) {
      const arr = data.filter(
        (el) => this.addForm.settleNetworkName == el.networkName
      );
      this.addForm.settleNetworkNameId = arr[0].networkCode;
    },
    changeContractArea(data) {
      const arr = data.filter(
        (el) => this.addForm.contractArea == el.networkName
      );
      this.addForm.contractAreaId = arr[0].networkCode;
    },
    changeCostKind(data) {
      const arr = data.filter((el) => this.addForm.hqCostKind == el.name);
      // this.addForm.hqCostKindId=arr[0].id
    },
    changeSettleObject(data) {
      const arr = data.filter((el) => this.addForm.hqSettleObject == el.name);
      // this.addForm.hqSettleObjectId=arr[0].
    },
    changeCostSubitem(data) {
      const arr = data.filter(
        (el) => this.addForm.hqCostSubitem == el.hqCostSubitem
      );
      // this.addForm.hqCostSubitemId=arr[0].
    },
    changeBigKind(list, name) {
      const arr = list.filter((el) => this.addForm.costBigKind == el.name);
      // this.addForm.costBigKindId=arr[0].
      this.subclass(name);
    },
    changeSmallKind(data) {
      const arr = data.filter((el) => this.addForm.costSmallKind == el.name);
      // this.addForm.costSmallKindId=arr[0].
    },
    handleClose() {
      if (this.drawer_loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")
        .then((_) => {
          this.drawer_loading = true;
          this.insert();
        })
        .catch((_) => {
          this.drawer_loading = false;
          this.dialog = false;
        });
    },
    async insert() {
      const res = await detailInsert(this.addForm);
      if (res.code === 200) {
        this.drawer_loading = false;
        this.dialog = false;
        this.$message({
          message: "添加成功",
          type: "success",
        });
      }
    },
    cancelForm() {
      this.drawer_loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
      Object.keys(this.addForm).forEach((key) => {
        if (typeof this.addForm[key] === "number") {
          this.addForm[key] = 0;
        } else if (
          typeof this.addForm[key] === "string" ||
          this.addForm[key] instanceof String
        ) {
          this.addForm[key] = "";
        }
      });
    },
    getSearchData() {
      if (this.$store.state.app.wdzdmxtab !== null) {
        // console.log(111)
        const data = this.$store.state.app.wdzdmxtab;
        this.value1 = data.date;
        this.khForm.dateType = data.date;
        this.changeTime();
        this.khForm.settleNetworkNameId = data.settleNetworkName;
        this.khForm.costBigKind = data.costBigKindId;
        this.khForm.startTime = data.startTime;
        this.khForm.endTime = data.endTime;
        this.loading = true;
        this.getKhList();
      }
    },
    updateScreenWidth() {
      this.flag = window.innerWidth >= 1700;
    },
    changeCodes: function (str) {
      this.testCode = str.split(" ");
    },
    handleSizeChange(val) {
      this.khForm.pageDate.pageSize = val;
      this.khForm.pageDate.pageNum = 1;
      this.getKhList();
    },
    handleCurrentChange(val) {
      this.khForm.pageDate.pageNum = val;
      this.getKhList();
    },
    // 查询
    async getKhList() {
      if (this.khForm.startTime === "") {
        this.$message("请填写时间");
        return;
      }
      this.id = 1;
      const requestData = {};
      // Object.keys(this.khForm).forEach((key) => {
      //   if (this.khForm[key] !== '') {
      //     requestData[key] = this.khForm[key]
      //   }
      // })
      // if (this.testCode.length == 0) {
      //   delete requestData.code
      // } else {
      //   requestData.code = this.testCode
      // }
      this.loading = true;

      const res = await DetailSearchApi(this.khForm);
      // console.log('???', res)
      if (res.code === 200) {
        this.khTable = res.data.data;
        // this.current = res.data.current
        this.total = res.data.total;
        // this.pages = res.data.pages
      }
      this.loading = false; // totalAmount拿不到数据阻塞该数据发生变化
      const rea = await SumSummaryApi(this.khForm);
      if (rea.code === 200) {
        this.SumSummaryList = rea.data;
      } else {
        this.SumSummaryList.totalExpend = 0;
        this.SumSummaryList.totalIncome = 0;
        this.SumSummaryList.totalAmount = 0;
      }
    },
    // 重置
    khClear() {
      this.id = 2;
      Object.keys(this.khForm).forEach((key) => {
        if (
          key !== "enterLeavingPort" &&
          key !== "costKind" &&
          key !== "dateType" &&
          key !== "settleNetworkNameId" &&
          key !== "pageDate"
        ) {
          this.khForm[key] = "";
        }
      });
      this.khTable = [];
      this.total = "";
      this.current = "";
      this.pages = "";
    },
    khSearch() {
      this.id = 3;
      const requestData = {};
      Object.keys(this.khForm).forEach((key) => {
        if (this.khForm[key] !== "") {
          requestData[key] = this.khForm[key];
        }
      });
      if (this.testCode.length == 0) {
        delete requestData.code;
      } else {
        requestData.code = this.testCode;
      }
      // this.$notify.info({
      //   title: '开始准备下载...'
      // })

      exportDataWDZDMX(requestData).then((res) => {
        console.log("????", res);
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: "success",
          });
        }
        // const url = window.URL.createObjectURL(new Blob([res]), {
        //   type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        // })
        // const link = document.createElement('a')
        // link.href = url
        // link.setAttribute('download', '网点账单明细.xlsx') // 设置下载的文件名
        // document.body.appendChild(link)
        // link.click()
        // link.parentNode.removeChild(link)
        // this.$notify({
        //   title: '下载成功',
        //   type: 'success'
        // })
      });
    },
    khClear1() {
      this.id = 4;
    },
    // 选择时间
    changeTime() {
      if (this.value1 != null) {
        this.khForm.startTime = this.value1[0];
        this.khForm.endTime = this.value1[1];
      }
    },
    // 结算网点列表
    async getOutlets() {
      const res = await getOutletsList();
      this.List = res.data;
      this.khForm.settleNetworkNameId = res.data[0]?.networkName;
    },
    // 费用大类列表
    async LookUpCategories() {
      const res = await CostBigKindApi();
      this.LookUpCategoriesList = res.data;
    },
    // 费用小类列表
    async CostSmallKind() {
      const res = await CostSmallKindApi();
      this.CostSmallKindList = res.data;
    },
    // 费用名称列表
    async FeeName() {
      const res = await FeeNameApi();
      this.FeeNameList = res.data;
    },
    // 结算科目列表
    async Settlement() {
      const res = await SettlementApi();
      this.SettlementList = res.data;
    },
    // 费用子项列表
    async FeeSubitem() {
      const res = await FeeSubitemApi();
      this.FeeSubitemList = res.data;
    },
    // // 根据大类查小类
    async LookUpCate(name) {
      const res = await CostSmallKindByBigApi(name);
      this.CostSmallKindList = res.data;
    },
    // 揽收员列表
    async TakeMan() {
      const res = await TakeManApi();
      this.TakeManList = res.data;
    },
    // 承包区列表
    async ShowCoverArea() {
      const res = await ShowCoverAreaApi();
      this.ShowCoverAreaLit = res.data;
    },
    // 选择承包区
    async ShowCover() {
      const res = await ShowCoverAreaByNetApi(this.khForm.contractArea);
      this.List = res.data;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  padding: 0px 20px;
}

.bt {
  background: #ffffff;
  border: 1px solid #666666;
  border-radius: 4px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #333333;
}

.active {
  background: #2087d0;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
}

.text {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #2087d0;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.flex-sa {
  display: flex;
  justify-content: space-around;
  width: 15%;

  &::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}

.flex-between {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.flex-sb {
  display: flex;
  width: 84%;

  .el-form-item {
    width: 25% !important;
  }
}

.adaptive {
  display: flex;
  flex-wrap: wrap;
  width: 84%;

  .el-form-item {
    width: 48% !important;
  }
}

.flex-sb-t {
  display: flex;
  width: 100%;

  .el-form-item {
    width: 21% !important;
  }

  .w10 {
    width: 16% !important;
  }

  .deep1 {
    &::v-deep .el-form-item__content {
      margin-left: 11% !important;
    }
  }

  .deep {
    &::v-deep .el-form-item__content {
      margin-left: -35% !important;
    }
  }
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.flex-between-add {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  margin: 20px 0;

  .end {
    margin-right: 4%;
  }

  .addform {
    &::v-deep .el-drawer__body {
      height: 100%;
      overflow-y: auto;
    }

    &::v-deep .el-drawer__body::-webkit-scrollbar {
      width: 0;
      /* 隐藏水平滚动条 */
      height: 0;
      /* 隐藏垂直滚动条 */
    }

    .el-form {
      margin: 0 5%;

      .el-form-item {
        display: flex;
        justify-content: space-around;

        &::v-deep .el-form-item__label {
          width: 25% !important;
        }

        &::v-deep .el-form-item__content {
          width: 60% !important;
          margin-left: 0 !important;

          .el-select {
            width: 100% !important;
          }

          .el-date-editor {
            width: 100% !important;
          }
        }
      }
    }

    .demo-drawer__footer {
      display: flex;
      justify-content: space-between;
      margin: 0 5% 5%;

      .el-button {
        flex: 1;
      }
    }
  }
}
</style>
